<template>
  <div>
    <echarts
      :className="className"
      :width="width"
      :height="height"
      :options="option"
    ></echarts>
  </div>
</template>
<script lang="ts" setup>
import gdData from '@/assets/json/zjs.json';
interface Data {
  [proppName: string]: number[];
}
interface ConvertData {
  name: string;
  value: number;
}
const className = 'contentMap';
const width = '100%';
const height = '100%';
const gdDatas: Data = gdData;
const convertData = (data: ConvertData[][]) => {
  const res = [];
  for (let i = 0; i < data.length; i++) {
    const dataItem = data[i];
    const fromCoord = gdDatas[dataItem[0].name];
    const toCoord = [120.19, 30.26];
    if (fromCoord && toCoord) {
      res.push({
        coords: [
          toCoord, // 起点
          fromCoord, // 终点
        ],
      });
    }
  }
  return res;
};
const chinaDatas = [
  [
    {
      name: '杭州市',
      value: 1,
    },
  ],
  [
    {
      name: '宁波市',
      value: 0,
    },
  ],
  [
    {
      name: '温州市',
      value: 0,
    },
  ],
  [
    {
      name: '湖州市',
      value: 0,
    },
  ],
  [
    {
      name: '丽水市',
      value: 0,
    },
  ],
  [
    {
      name: '衢州市',
      value: 0,
    },
  ],
  [
    {
      name: '嘉兴市',
      value: 0,
    },
  ],
  [
    {
      name: '绍兴市',
      value: 0,
    },
  ],
  [
    {
      name: '台州市',
      value: 0,
    },
  ],
  [
    {
      name: '金华市',
      value: 0,
    },
  ],
  [
    {
      name: '舟山市',
      value: 0,
    },
  ],
];

const series: any[] = [];
[['杭州市', chinaDatas]].forEach((item: any, i) => {
  series.push(
    {
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol:
          'image://https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F38%2F33%2F5812418f4f67f_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650962719&t=a1d0e665323b51cf370043373014346a', //箭头图标
        symbolSize: 10, //图标大小
      },
      lineStyle: {
        width: 2, //尾迹线条宽度
        opacity: 1, //尾迹线条透明度
        curveness: 0.3, //尾迹线条曲直度
      },
      data: convertData(item[1]),
    },
    {
      type: 'scatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
        //涟漪特效
        period: 3, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4, //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        show: false,
        position: 'right', //显示位置
        offset: [5, 0], //偏移设置
        formatter: function (params: any) {
          //圆环显示文字
          return params.data.name;
        },
        fontSize: 13,
      },
      symbol: 'circle',
      // symbolSize: function(val:any) {
      //   return 5+ val[2] * 5; //圆环大小
      // },
      itemStyle: {
        show: false,
        color: '#34c6bb',
      },
      emphasis: {
        label: {
          show: true,
        },
      },
      data: item[1].map(function (dataItem: any) {
        return {
          name: dataItem[0].name,
          value: gdDatas[dataItem[0].name],
        };
      }),
    },
    {
      type: 'map',
      map: '浙江',
      itemStyle: {
        areaColor: 'rgba(0,255,255,.02)',
        borderColor: '#00ffff',
        borderWidth: 1.5,
        shadowColor: '#00ffff',
        shadowOffsetX: 0,
        shadowOffsetY: 4,
        shadowBlur: 10,
      },
      label: {
        show: true,
        color: '#fff',
      },
      emphasis: {
        // 鼠标悬停时样式
        label: {
          color: '#fbbd08',
        },
        itemStyle: {
          areaColor: '#1cbbb4',
          borderType: 'solid',
          borderColor: '#1cbbb4',
        },
      },
      select: {
        // 选中时样式
        label: {
          color: '#f37b1d',
        },
        itemStyle: {
          areaColor: 'rgba(0, 60, 131, 0.7)',
          borderType: 'solid',
          borderColor: 'rgb(0, 60, 131)',
        },
      },
    },
  );
});

const option = {
  title: {
    text: '出行服务+大数据\n\n浙江省交通大数据分析平台',
    textStyle: {
      fontSize: 24,
      color: '#fff',
    },
    left: '4%',
    top: '3%',
  },
  color: ['#34c6bb'],
  geo: {
    /* silent: true,
    map: '浙江',
    zoom: 1.1,
    label: {
      show: true,
      color: '#fff',
    },
    top: '16%',
    tooltip: {
      show: false,
    },
    roam: 'scale',
    nameProperty: 'name',
    itemStyle: {
      areaColor: 'rgba(0,255,255,.02)',
      borderColor: '#00ffff',
      borderWidth: 1.5,
      shadowColor: '#00ffff',
      shadowOffsetX: 0,
      shadowOffsetY: 4,
      shadowBlur: 10,
    }, */
    map: '浙江',
    itemStyle: {
      areaColor: 'rgba(0,255,255,.02)',
      borderColor: '#00ffff',
      borderWidth: 1.5,
      shadowColor: '#00ffff',
      shadowOffsetX: 0,
      shadowOffsetY: 4,
      shadowBlur: 10,
    },
  },
  series: series,
};
</script>
